<template>
    <div class="content productOrder">
        <van-nav-bar title="确认订单" left-arrow @click-left="$navBack(`/product/detail?productId=${productId}`)"></van-nav-bar>
        <order-address-select @change="getExpressId"></order-address-select>
        <div class="panel box-shadow">
            <div class="panel-body">
                <div class="thumb">
                    <img :src="productInfo.productPicture" class="thumb"/>
                </div>
                <div class="name ">
                    <div class="ellipsis-3-pk">
                        {{productInfo.productName}}
                    </div>
                </div>
                <div class="priceWrap">
                    <div class="icon">￥</div>
                    <Price :value="productInfo.productPrice" :prefix-style="prefixStyle"/>
                    <div class="how">
                        x1
                    </div>
                </div>
            </div>
            <div class="cell page-pad-pk">
                <div class="label">运费</div>
                <div class="info">
                    免运费
                </div>
            </div>
            <div class="hr"/>
            <div class="panel-footer page-pad-pk">
                <div class="amount">共1件</div>
                <div class="total">小计：</div>
                <div class="icon">￥</div>
                <Price :value="productInfo.productPrice" :prefix-style="prefixStyle"/>
            </div>
        </div>
        <div v-if="!isVip" class="grade">
            <van-cell title="是否修改推荐人?">
                <van-radio-group v-model="inviterChange" slot="default">
                    <van-radio name="1">是</van-radio>
                    <van-radio name="2">否</van-radio>
                </van-radio-group>
            </van-cell>
            <div v-show="inviterChange === '1'">
                <van-field
                        v-model="newInviteNum"
                        placeholder="请输入新推荐人的邀请码"
                        label="新推荐人"
                        @blur="getInviteUserInfo"
                        input-align="right">
                </van-field>
                <div class="member">
                    <pk-img :src="inviterInfo.inviteHeadPortrait"
                            round
                            width="56px"
                            height="56px">
                    </pk-img>
                    <div class="info">
                        <div class="nickname">{{inviterInfo.inviteNickName}}</div>
                        <div class="inviteNum">{{inviterInfo.inviteInviteNumber}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="notice page-pad-pk">
            <div class="notice-title">
                {{productInfo.tipTitle}}
            </div>
            <div class="notice-body">
                {{productInfo.tipContent}}
            </div>
        </div>
        <pay-type @change="getPayType"></pay-type>
        <pay-action ref="payAction"  class="p-fix-b-pk" :money="payMoney" @change="handlePay"></pay-action>
        <pay-password ref="payPasswordPop"  operate-type="1" @change="balancePay"></pay-password>
    </div>
</template>

<script>
    import Price from "./Price";
    import OrderAddressSelect from "../../components/OrderAddressSelect";
    import PayType from "../../components/pay/payType";
    import PayPassword from "../../components/pay/PayPassword";
    import PayAction from "../../components/pay/payAction";
    export default {
        name: "Order",
        components: {
            PayAction,
            PayPassword,
            PayType,
            OrderAddressSelect,
            Price,
        },
        data() {
            return {
                productId: this.$route.query.productId,
                expressId: "",
                payType: null,
                payMoney: "",
                payPassword: "",
                wxPayResult: false,
                inviterChange: "2",
                newInviteNum: "",

                showNotice: true,
                isShowContent: true,
                agreeStand:false,
                prefixStyle:{
                    fontSize: '16px'
                },
                productInfo : {},

                inviterInfo: {
                    inviteHeadPortrait: "",
                    inviteInviteNumber: "",
                    inviteNickName: "",
                }
            }
        },
        created() {
            this.getProduct();
        },
        computed: {
            inviteNum() {
                return this.$store.state.inviteNum
            },
            isVip() {
                return this.$store.state.isVip
            },
        },
        watch: {
            isVip: {
                handler() {
                    let userInfo = this.$store.state.userInfo;
                    this.inviterInfo.inviteHeadPortrait = userInfo.inviteHeadPortrait;
                    this.inviterInfo.inviteInviteNumber = userInfo.inviteInviteNumber;
                    this.inviterInfo.inviteNickName = userInfo.inviteNickName
                },
                immediate: true,
            },
            inviteNum: {
                handler(val) {
                    if(val) {
                        this.newInviteNum = val;
                        this.getInviteUserInfo()
                    }
                },
                immediate: true
            }
        },
        methods: {
            getExpressId(val) {
                this.expressId = val;
                this.getShippingCost()
            },
            getShippingCost() {

            },
            getProduct() {
                this.$api.getProduct(this.productId).then(res => {
                    let result = this.$resData(res);
                    if(result) {
                        this.productInfo = result;
                        this.payMoney = result.productPrice;
                    }
                });
            },

            getInviteUserInfo(){
                if(!this.newInviteNum) {
                    return
                }
                this.$api.getInviteUserInfo(this.newInviteNum).then((res)=>{
                    let result = this.$resData(res);
                    if(result) {
                        this.inviterInfo.inviteHeadPortrait = result.headPortrait;
                        this.inviterInfo.inviteInviteNumber = result.inviteNumber;
                        this.inviterInfo.inviteNickName = result.nickName;
                    }
                })
            },

            //支付相关--------------------------------------
            getPayType(val) {
                this.payType = val;
            },
            /*
            * 支付流程：获取动态密钥 -> 创建订单 -> 支付 -> 余额 ？ 支付结果 ： 转第三方支付
            */
            async handlePay(val) {
                if(!this.payType) {
                    this.$toast("请选择支付方式");
                    return false
                }
                //创建订单
                this.dynamicSecretKey = val;
                this.productOrderId = await this.productOrderCreate();
                if(!this.productOrderId) {
                    return
                }
                //判断|支付方式
                if(this.payType === "3") {
                    //余额支付
                    this.$refs.payPasswordPop.open()
                }else {
                    //第三方支付
                    this.orderPay()
                }
            },
            //余额支付,输入密码
            balancePay(val) {
                this.payPassword = this.$util.encrypt(val, this.dynamicSecretKey.tokenKey);
                this.orderPay()
            },
            //创建订单
            productOrderCreate() {
                return new Promise( (resolve, reject) => {
                    this.$api.productOrderCreate({
                        expressId: this.expressId,
                        inviteNumber: this.inviterInfo.inviteInviteNumber,
                        isUserExChange: "0",//暂时写死， 礼包有多种价格，现在兑换券默认能兑换任一礼包
                        productId: this.productId
                    }).then(res => {
                        resolve(this.$resData(res))
                    }).catch( () => {
                        reject(false)
                    })
                })
            },
            //支付 1支付宝支付 2微信支付 3余额支付 4银联支付
            //微信支付类型，不填默认app支付，0=App支付 1=H5支付 2=JSAPI支付
            orderPay() {
                this.$toast.loading("提交中");
                this.$api.productPayOrder({
                    payPassword: this.payPassword,//余额支付需要输入支付密码
                    payType: this.payType,
                    productOrderId: this.productOrderId,
                    userKey: this.dynamicSecretKey.userKey,
                    wxPayType: this.$global.isWxBrowser ? "2" : "1",
                }).then(res => {
                    this.$toast.clear();
                    let result = this.$resData(res);
                    if(result) {
                        switch (this.payType) {
                            case "1":
                                //支付宝
                                this.$refs.payAction.aliPay(result);
                                break;
                            case "2":
                                this.$refs.payAction.wxPay(result);
                                break;
                            case "3":
                                //余额
                                this.$toast.success("支付成功");
                                //this.$router.push({path: "/goodsOrder/paySuccess", query: {orderId: this.orderIdList}});
                                break;
                        }
                    }
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    .productOrder {
        padding-bottom: 70px;
        /deep/.van-cell__left-icon, .van-cell__right-icon {
            color: rgb(150, 151, 153);
        }
        .box-shadow {
            box-shadow: 1px 1px 12px 1px #ffe7e3;
        }

        .address {
            display: flex;
            align-items: center;
            background-color: #ffffff;
            padding: 15px;

            .van-icon {
                color: var(--red-color);
            }

            .info {
                line-height: 1.6;
                margin-left: 15px;

                .name {
                    display: inline-block;
                    font-weight: bold;
                }

                .phone {
                    font-weight: normal;
                    display: inline-block;
                    color: var(--gray-b3);
                    margin-left: 6px;
                }

                .add {
                    margin-top: 6px;
                    font-weight: 600;
                    line-height: 1.4;
                    letter-spacing: 1px;
                }

            }
        }

        .panel {
            background-color: #ffffff;
            margin-top: 15px;
            .panel-body {
                padding: 15px;
                display: flex;
                justify-content: space-between;

                .thumb {
                    flex: 0 0 25vw;
                    height: 25vw;
                    border-radius: 4px;
                    background: #efefef url("~@img/img-error.png") no-repeat;
                    background-clip: inherit;
                    background-origin: border-box;
                    background-position: inherit;
                    background-size: 100%;

                    img {
                        width: 100%;
                        height: 25vw;
                        display: block;
                    }
                }

                .name {
                    flex: 0 0 36vw;
                    font-weight: bold;
                    padding: 8px;
                }

                .priceWrap {
                    flex: 0 0 25vw;
                    text-align: right;
                    align-self: end;

                    .icon {
                        display: inline-block;
                        font-size: 12px;
                        color: var(--red-color);
                    }

                    .prefixClass {
                        display: inline-block;
                        color: var(--red-color);
                        font-size: 16px;
                    }

                    .point {
                        color: var(--red-color);
                    }

                    .suffixClass {
                        color: var(--red-color);
                        font-size: 16px;
                        display: inline-block;
                    }
                }
            }

            .cell {
                display: flex;
                align-items: center;

                .label {
                    text-align: right;
                    flex: 0 0 25vw;
                }

                .info {
                    margin-left: 8px;
                    color: #B3B3B3;
                }
            }

            .hr {
                height: 1px;
                background-color: #efefef;
                margin: 10px;
            }

            .panel-footer {
                display: flex;
                justify-content: flex-end;
                padding-bottom: 10px;
                align-items: baseline;
                .icon {
                    font-size: 12px;
                    color: var(--red-color);
                }
                .total {
                    margin-left: 6px;
                }
                .price{
                    font-size: 12px;
                    .prefixClass1{
                        font-size: 25px;
                    }
                }
            }


        }

        .grade {
            margin-top: 15px;
            background-color: #ffffff;

            .van-cell {
                border-bottom: 1px solid #efefef;
                justify-items: flex-end;
                .van-cell__title {
                    color: #b2b2b2;
                }

                .van-cell__value {
                    .van-radio-group {
                        display: flex;
                        justify-content: flex-end;
                        align-items: baseline;
                    }

                    .van-radio {
                        margin-left: 8px;
                    }
                }
            }

            .member {
                padding: 15px;
                display: flex;
                .info {
                    margin-left: 12px;
                    line-height: 28px;
                    .inviteNum {
                        color: #b2b2b2;
                    }
                }
            }
        }

        .notice {
            margin-top: 15px;
            background: #ffffff;
            padding-top: 15px;
            .notice-title {
                background-color: transparent;
                font-weight: 500;
                padding: 12px 0 8px;
            }

            .notice-body {
                background-color: transparent;
                line-height: 1.5;
            }

        }
        .footer-fixed{
            position: fixed;
            z-index: 999;
            width: 100%;
            bottom: 0;
            background: #fff;
            .van-checkbox{
                padding: 15px;
                background: #fbeff0;
                .text-danger{
                    margin-left: 8px;
                    color: var(--red-color);
                }
            }
            .bill{
                display:flex;
                justify-content: space-between;
                .left{
                    padding:15px;
                    .price{
                        display: inline-block;
                        color: var(--red-color);
                        .icon{
                            font-size: 12px;
                        }
                    }
                }
                .right{
                    padding: 15px 0;
                    flex: 0 0 30vw;
                    text-align: center;
                    background-color: #d82d11;
                    color: #fff;
                    letter-spacing: 2px;
                }
            }
        }
    }
</style>
